---
title: Feedback
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

Indica el progrés o compte enrere i es mou de dreta a esquerra.

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Propietats  | Tipus   | Descripció                                                                                        | Per defecte |
| ----------- | ------- | ------------------------------------------------------------------------------------------------- | ----------- |
| durada      | número  | La durada total de l'animació de la barra de progrés en mil·lisegons                              | 3           |
| retard      | número  | El retard en l'inici de l'animació de la barra de progrés en mil·lisegons                         | 0           |
| suavització | cadena  | Funció de suavització per a l'animació de la barra de progrés                                     | easeInOut   |
| barHeight   | número  | L'altura de la barra en píxels                                                                    | 24          |
| barColor    | cadena  | El color de la barra                                                                              | gray80      |
| autoStart   | boolean | Si és "true", l'animació de la barra de progrés comença automàticament quan es munta el component | `cert`      |

</Tab>
</Tabs>

## Barra de Progrés Circular

Indica el progrés d'una tasca, sovint utilitzada en pantalles de càrrega o àrees on es vol comunicar processos en curs a l'usuari.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| Propietats | Tipus  | Descripció                                   | Per defecte  |
| ---------- | ------ | -------------------------------------------- | ------------ |
| tamany     | número | La mida de la barra de progrés circular      | 50           |
| barWidth   | número | L'amplada de la línia de la barra de progrés | 5            |
| barColor   | cadena | El color de la barra de progrés              | currentColor |

</Tab>

</Tabs>
